<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>奖品选择页面</title>
  <style>
      body {
          background-color: #FFD1F0; /* 粉色背景 */
          font-family: Arial, sans-serif;
      }
      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px;
      }
      .title {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 20px;
      }
      .prize-grid {
          display: grid;
          grid-template-columns: repeat(5, 100px);
          grid-template-rows: repeat(6, 100px);
          gap: 10px;
      }
      .prize-btn {
          background-color: #D3A7F9; /* 浅紫色 */
          border: 2px solid #FFFFFF; /* 白色边框 */
          border-radius: 10px;
          padding: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
      }
      .prize-btn span {
          font-size: 20px;
          margin-bottom: 10px;
      }
      .count-btn {
          display: flex;
          justify-content: space-between;
          width: 100%;
      }
      .count-btn button {
          background-color: #D3A7F9;
          border: 2px solid #FFFFFF;
          border-radius: 5px;
          padding: 5px 10px;
          font-size: 16px;
      }
      .total {
          margin-top: 20px;
          font-size: 20px;
          font-weight: bold;
      }
      .pay-btn {
          background-color: #D3A7F9;
          border: 2px solid #FFFFFF;
          border-radius: 10px;
          padding: 10px 20px;
          font-size: 18px;
          cursor: pointer;
      }
  </style>
</head>
<body>
<div class="container">
  <div class="title">奖品</div>
  <div class="prize-grid">
    <!-- 生成30个奖品按钮 -->
    <div class="prize-btn" data-prize-id="1">
      <span>1</span>
      <div class="count-btn">
        <button onclick="decreaseCount(1)">-</button>
        <span id="count-1">0</span>
        <button onclick="increaseCount(1)">+</button>
      </div>
    </div>
    <!-- 重复上述结构，生成2-30号奖品按钮（data-prize-id从2到30递增，id从count-2到count-30递增） -->
    <!-- 示例：第2个奖品 -->
    <div class="prize-btn" data-prize-id="2">
      <span>2</span>
      <div class="count-btn">
        <button onclick="decreaseCount(2)">-</button>
        <span id="count-2">0</span>
        <button onclick="increaseCount(2)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="3">
      <span>3</span>
      <div class="count-btn">
        <button onclick="decreaseCount(3)">-</button>
        <span id="count-3">0</span>
        <button onclick="increaseCount(3)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="4">
      <span>4</span>
      <div class="count-btn">
        <button onclick="decreaseCount(4)">-</button>
        <span id="count-4">0</span>
        <button onclick="increaseCount(4)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="5">
      <span>5</span>
      <div class="count-btn">
        <button onclick="decreaseCount(5)">-</button>
        <span id="count-5">0</span>
        <button onclick="increaseCount(5)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="6">
      <span>6</span>
      <div class="count-btn">
        <button onclick="decreaseCount(6)">-</button>
        <span id="count-6">0</span>
        <button onclick="increaseCount(6)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="7">
      <span>7</span>
      <div class="count-btn">
        <button onclick="decreaseCount(7)">-</button>
        <span id="count-7">0</span>
        <button onclick="increaseCount(7)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="8">
      <span>8</span>
      <div class="count-btn">
        <button onclick="decreaseCount(8)">-</button>
        <span id="count-8">0</span>
        <button onclick="increaseCount(8)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="9">
      <span>9</span>
      <div class="count-btn">
        <button onclick="decreaseCount(9)">-</button>
        <span id="count-9">0</span>
        <button onclick="increaseCount(9)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="10">
      <span>10</span>
      <div class="count-btn">
        <button onclick="decreaseCount(10)">-</button>
        <span id="count-10">0</span>
        <button onclick="increaseCount(10)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="11">
      <span>11</span>
      <div class="count-btn">
        <button onclick="decreaseCount(11)">-</button>
        <span id="count-11">0</span>
        <button onclick="increaseCount(11)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="12">
      <span>12</span>
      <div class="count-btn">
        <button onclick="decreaseCount(12)">-</button>
        <span id="count-12">0</span>
        <button onclick="increaseCount(12)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="13">
      <span>13</span>
      <div class="count-btn">
        <button onclick="decreaseCount(13)">-</button>
        <span id="count-13">0</span>
        <button onclick="increaseCount(13)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="14">
      <span>14</span>
      <div class="count-btn">
        <button onclick="decreaseCount(14)">-</button>
        <span id="count-14">0</span>
        <button onclick="increaseCount(14)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="15">
      <span>15</span>
      <div class="count-btn">
        <button onclick="decreaseCount(15)">-</button>
        <span id="count-15">0</span>
        <button onclick="increaseCount(15)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="16">
      <span>16</span>
      <div class="count-btn">
        <button onclick="decreaseCount(16)">-</button>
        <span id="count-16">0</span>
        <button onclick="increaseCount(16)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="17">
      <span>17</span>
      <div class="count-btn">
        <button onclick="decreaseCount(17)">-</button>
        <span id="count-17">0</span>
        <button onclick="increaseCount(17)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="18">
      <span>18</span>
      <div class="count-btn">
        <button onclick="decreaseCount(18)">-</button>
        <span id="count-18">0</span>
        <button onclick="increaseCount(18)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="19">
      <span>19</span>
      <div class="count-btn">
        <button onclick="decreaseCount(19)">-</button>
        <span id="count-19">0</span>
        <button onclick="increaseCount(19)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="20">
      <span>20</span>
      <div class="count-btn">
        <button onclick="decreaseCount(20)">-</button>
        <span id="count-20">0</span>
        <button onclick="increaseCount(20)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="21">
      <span>21</span>
      <div class="count-btn">
        <button onclick="decreaseCount(21)">-</button>
        <span id="count-21">0</span>
        <button onclick="increaseCount(21)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="22">
      <span>22</span>
      <div class="count-btn">
        <button onclick="decreaseCount(22)">-</button>
        <span id="count-22">0</span>
        <button onclick="increaseCount(22)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="23">
      <span>23</span>
      <div class="count-btn">
        <button onclick="decreaseCount(23)">-</button>
        <span id="count-23">0</span>
        <button onclick="increaseCount(23)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="24">
      <span>24</span>
      <div class="count-btn">
        <button onclick="decreaseCount(24)">-</button>
        <span id="count-24">0</span>
        <button onclick="increaseCount(24)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="25">
      <span>25</span>
      <div class="count-btn">
        <button onclick="decreaseCount(25)">-</button>
        <span id="count-25">0</span>
        <button onclick="increaseCount(25)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="26">
      <span>26</span>
      <div class="count-btn">
        <button onclick="decreaseCount(26)">-</button>
        <span id="count-26">0</span>
        <button onclick="increaseCount(26)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="27">
      <span>27</span>
      <div class="count-btn">
        <button onclick="decreaseCount(27)">-</button>
        <span id="count-27">0</span>
        <button onclick="increaseCount(27)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="28">
      <span>28</span>
      <div class="count-btn">
        <button onclick="decreaseCount(28)">-</button>
        <span id="count-28">0</span>
        <button onclick="increaseCount(28)">+</button>
      </div>
    </div>
    <div class="prize-btn" data-prize-id="29">
      <span>29</span>
      <div class="count-btn">
        <button onclick="decreaseCount(29)">-</button>
        <span id="count-29">0</span>
        <button onclick="increaseCount(29)">+</button>
      </div>
    </div>
    <!-- ... 省略中间部分，同理生成3-30号奖品 -->
    <div class="prize-btn" data-prize-id="30">
      <span>30</span>
      <div class="count-btn">
        <button onclick="decreaseCount(30)">-</button>
        <span id="count-30">0</span>
        <button onclick="increaseCount(30)">+</button>
      </div>
    </div>
  </div>
  <div class="total">总计：¥<span id="total-price">0</span></div>
  <button class="pay-btn" onclick="pay()">确定支付</button>
</div>
<script>
  // 奖品数量对象（key为奖品ID，value为数量）
  const prizeCounts = {};

  // 增加数量
  function increaseCount(prizeId) {
    prizeCounts[prizeId] = (prizeCounts[prizeId] || 0) + 1;
    updateCountDisplay(prizeId);
    calculateTotal();
  }

  // 减少数量（数量≥1时生效）
  function decreaseCount(prizeId) {
    if (prizeCounts[prizeId] > 0) {
      prizeCounts[prizeId]--;
      updateCountDisplay(prizeId);
      calculateTotal();
    }
  }

  // 更新单个奖品的数量显示
  function updateCountDisplay(prizeId) {
    const countElement = document.getElementById(`count-${prizeId}`);
    countElement.textContent = prizeCounts[prizeId] || 0;
  }

  // 计算总价（假设每个奖品单价1元）
  function calculateTotal() {
    let total = 0;
    for (const count of Object.values(prizeCounts)) {
      total += count;
    }
    document.getElementById("total-price").textContent = total * 30;
  }

  // 模拟支付流程（可扩展为实际支付逻辑）
  function pay() {
    const prizeList = ['新款星星人挂件（200积分）', '刮刮乐', '免费再抽三次', '88元现金红包', '中秋雪莉玫预售', '恭喜获得黑皮哭娃' ,'神秘大奖！神秘~']
    let message = '奖品公布：'
    const randomNum = []
    const randomName = []
    for (let i = 0; randomNum.length < 7; i++) {
      const key = Math.floor(Math.random() * 30) + 1
      const key2 = Math.floor(Math.random() * 7) + 1
      if(!randomNum.includes(key)){
        randomNum.push(key)
      }
      if(!randomName.includes(key2)){
        randomName.push(key2)
      }
    }

    for (let i = 0; i < randomNum.length; i++) {
      message+= `\n${randomNum[i]}号位奖品,内容：${prizeList[i]},`
      for (const key in prizeCounts) {
        if (key == randomNum[i]){
          message+= '（恭喜中奖）'
          break
        }
      }
    }

    console.log(randomNum)
    console.log(message)
    alert(`支付成功，${message}`);
  }
</script>
</body>
</html>
